<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>设备捕捉</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>

</head>

<body id="body">
<div id='map'></div>
<div class="opt_panel">
    <button onclick="onStartSnap()">开始捕捉</button>
    <button onclick="onEndSnap()">停止捕捉</button>
    <br>
    <button onclick="onReset()">恢复</button>
    <button onclick="onSetLayers()">仅捕捉变压器</button>
    <button onclick="onSetTypes()">仅捕捉端子</button>
    <button onclick="onSetLineTypes()">仅捕捉线路</button>
    <button onclick="onSetTolerance()">更改容差</button>
</div>
</body>

</html>

<script>
    //示例说明：
    //本示例展示如何使用捕捉工具对点，线，面，端子四类业务单位进行捕捉

    mapOptions = {
        zoom: 22,
        center: {lng: 118.15076774543695, lat: 24.72766931338377},
        // zoom: 23,
        // center: {lng: 107.97619381466961, lat: 34.28378301402492}
    }

    gridLayerOptions = {
        disschema:10
    }

    snapToolOptions = {
        // tolerance: 20, //容差（单位像素）
        // snapPointVisible: true,
        // cursorStyle: 'crosshair',
        // layers: [202000], //opts.canSnapSymbol, //['301000'],//需要捕捉的图层，设置为空数组，null等值表示全部都捕捉，否则只捕捉该选项中指定的设备类型
        // types: ['terminal','line'],//捕捉的类型(不含网格)
        // priority: ['terminal','line']//捕捉的优先级

        types: ['point', 'line', 'terminal'], //表示参与捕捉的设备几何类型包含 点(point)，线(line)，端子(terminal)
        priority: ['terminal','point', 'line']
        // layersExt:{'202000':['20200001']}
    }
    gridLayerOptions = {
        // version: 25446
    }
    //示例功能代码
    // var snapTool = null

    //开启捕捉工具
    function onStartSnap() {
        snapTool.enable()
    }

    //关闭捕捉工具
    function onEndSnap() {
        snapTool.disable()
    }

    //重置捕捉选项
    function onReset() {
        snapTool.setOptions(null)
    }

    //捕捉指定设备图层（如果是点设备会包含对应的端子）
    function onSetLayers() {
        snapTool.setLayers(['301000'])//变压器
        // snapTool.setLayers(['1102000'])
    }

    //捕捉指定的
    function onSetTypes() {
        snapTool.setTypes(['terminal'])
    }

    function onSetLineTypes() {
        snapTool.setTypes(['line'])
    }

    let tolerance = 10

    function onSetTolerance() {
        tolerance = (tolerance + 5) % (50)
        snapTool.setTolerance(tolerance)
    }

    function initPage() {
        initSnapTool()
        mapServiceUrl = msServiceUrl + '/mapservice/mapexport/vecformat'
        initGridLayer()
    }

    window.onload = function () {
        loadGeoMap_ms(initPage)
    }

</script>
